import React, { Component } from 'react'


const Header = (props) => {

    // 函数式组件和 Vue 中的组合式 API 一样无法使用 this
    // console.log(this);

    // 在函数式组件中因为没有 this ，所以我们需要在函数组件的参数中进行接收 props 
    // console.log(props);
    return (<>
        <div>
            没有不变了承诺 --
            {props.name} --
            {props.num + 1} --
            {props.age + 1} --
            {props.title}
        </div>
    </>)
}

// defaultProps 定义函数式组件中的默认属性值
// 如果父组件有传递，那么就会使用父组件传递的值
// 如果父组件没有传递，那么就会使用自己定义的默认值
Header.defaultProps = {
    title: '你好'
}


class Content extends Component {


    // static 类继承的时候，子类可以继承父类的所有方法和属性，如果父类定义的是
    // 静态属性，那么这些静态属性将无法被继承

    // 类组件还可以通过定义私有属性的方式进行默认值的接收
    static defaultProps = {
        title: '中国'
    }

    render() {
        // 在类组件中可以直接通过  this.props 来获取我们传递的参数
        console.log(this);

        return (
            <div>只有说不完的谎言。 -- {this.props.name} -- {this.props.title} </div>
        )
    }
}

// 类组件中也可以通过 组件名.defaultProps 的方式进行默认值的设置
// Content.defaultProps = {
//     title: '你好'
// }



export default class App extends Component {
    render() {
        return (
            <div>
                {/* 只要你传递的参数不是纯字符串，那么都需要加上 {} */}
                <Header name='React' num='18' age={18} />

                <Content name='React' num='18' obj={{
                    name: '张三',
                    age: 18
                }} />
            </div>
        )
    }
}
